import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Badge, Descriptions, Card,Button } from 'antd';
import { reqHosDetail } from '@api/hospitalList';
import { IShowDetail } from '@api/hospitalList/model/hospitalListType';

export default function Hospitalshow() {
  //定义状态，获取数据，渲染页面
  const [show, setShow] = useState<IShowDetail>({});
  //获取路由参数
  const { id } = useParams();

  const navigate =useNavigate()
  useEffect(() => {
    (async () => {
      const result = await reqHosDetail(id as string);
      setShow(result);
    })();
  }, []);

  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {show.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {' '}
          <img
            src={'data:image/png;base64,' + show.hospital?.logoData}
            alt=""
            width="80"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {show.hospital?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {show.hospital?.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {show.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {show.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions title="预约规则信息" bordered column={2}>
        <Descriptions.Item label="预约周期">
          {show.bookingRule?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
        {show.bookingRule?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
        {show.bookingRule?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
        {show.bookingRule?.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
        {show.bookingRule?.rule}
        </Descriptions.Item>
      </Descriptions>
      <Button className='gap' onClick={() =>{
        navigate(-1)
      }}>返回</Button>
    </Card>
  );
}
